<template>
	<view class="orderMessage">
		<view class="orderMessage-plate-1">
			<view class="item" v-for="(item,index) in messageList" :key="index" @click="goOrderDetail(item.order_item_id)">
				<image :src="item.goods_pic_one" mode=""></image>
				<view class="item-right">
					<view class="right-top">
						<text>{{item.pay_status_name}}</text>
						<text>{{item.create_time}}</text>
					</view>
					<view class="goods-name">
						{{item.goods_name}}
					</view>
				</view>
			</view>
		</view>
		<view class="nullList" v-if="messageList.length == 0">
			<image src="../../../static/ic_empty_order.png" mode="widthFix"></image>
			<text>暂无订单消息</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page:1,
				messageList:[]
			}
		},
		created() {
			this.getMessageList()
		},
		onReachBottom() {
			this.page ++
			this.getMessageList()
		},
		methods: {
			// 前往订单详情页面
			goOrderDetail(id){
				uni.navigateTo({
					url:'../../common/orderDetail/orderDetail?id=' + id
				})
			},
			// 请求订单消息列表
			getMessageList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Order/orderList',
				    method:'POST',
				    data:{
				       p:this.page,
					   pay_status:0
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.messageList = this.messageList.concat(res.data.data.order_list.order_item_list) 
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.orderMessage{
	width: 100vw;
	min-height: 100vh;
	background-color: #F8F8F8;
	.orderMessage-plate-1{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		.item{
			margin: 10upx auto;
			height: 200upx;
			background-color: #fff;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			image{
				width: 138upx;
				height: 145upx;
				margin-right: 20upx;
			}
			.item-right{
				width: 525upx;
				.right-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20upx;
					text:first-child{
						color: $zhuti-color;
						font-size: 28upx;
					}
					text:last-child{
						color: #999;
						font-size: 22upx;
					}
				}
				.goods-name{
					color: #333;
					font-size: 26upx;
				}
			}
		}
	}
	.nullList{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 740upx;
		image{
			width: 220upx;
			margin-bottom: 30upx;
		}
		text{
			font-size: 30upx;
			color: #999;
		}
	}
}
</style>
